// COMMON STYLES
// -------------------------------------------------------------------------

// VARIABLES
// -------------------------------------------------------------------------

// FONTS
@font-face
    font-family "OpenSans"
    src url("../fonts/OpenSans-Regular-webfont.eot")
    src url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype")
    font-weight normal
    font-style normal
@font-face
    font-family "OpenSansLight"
    src url("../fonts/OpenSans-Light-webfont.eot")
    src url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype")
    font-weight normal
    font-style normal
@font-face
    font-family "OpenSansBold"
    src url("../fonts/OpenSans-Bold-webfont.eot")
    src url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype")
    font-weight normal
    font-style normal
monoFonts = Lucida Console,Liberation Mono,Courier New

// GLOBAL SIZING
headerHeight = 33px
footerHeight = 29px
mapControlsWidth = 295px

// PAGE AND TEXT COLOURS
pageBgColor = rgb(0, 0, 0)
darkBgColor = rgb(33, 33, 33)
mediumBgColor = rgb(55, 55, 55)
lightBgColor = rgb(99, 99, 99)
brightBgColor = rgb(170, 170, 170)
darkTextColor = rgb(15, 10, 5)
lightTextColor = rgb(250, 240, 230)
brightTextColor = rgb(255, 255, 255)
linkColor = rgb(145, 190, 35)

// SPECIAL COLORS
lightHoverColor = rgb(140, 210, 50)
darkHoverColor = rgb(90, 160, 30)
tabBorderColor = rgb(60, 150, 20)
checkedBg = rgb(60, 150, 50)
inputTextColor = rgb(0, 0, 0)
inputBgColor = rgb(250, 250, 250)

okBg = rgb(90, 160, 30)
errorBg = rgb(180, 40, 30)
errorColor = rgb(180, 40, 30)
errorLightColor = rgb(240, 100, 80)

// OVERLAY PROPERTIES
overlayBackground = rgb(40, 40, 40)
overlayBorder = 1px solid rgb(0, 0, 0)
overlayLightBorder = 1px solid rgb(255, 255, 255)


// STYLED SCROLLBARS
// -------------------------------------------------------------------------
::-webkit-scrollbar
    background-color Transparent
    height 13px
    width 13px

::-webkit-scrollbar-thumb
    background-color lightBgColor

::-webkit-scrollbar-thumb:hover
    background-color darkHoverColor !important


// BODY AND LAYOUT
// -------------------------------------------------------------------------

// The body style.
body
    background pageBgColor
    color lightTextColor
    font 13px OpenSans, sans-serif
    height 100%
    margin 0
    min-height 1220px
    overflow hidden
    padding 0
    position relative
    width 100%
    -webkit-font-smoothing antialiased

// Links are green.
a
    color linkColor
    text-decoration none

// The main wrapper.
#wrapper
    overflow hidden
    position relative

// The "loading..." animated box
#loading
    background pageBgColor
    height 100%
    left 0
    position fixed
    overflow hidden
    text-align center
    top 0
    vertical-align middle
    width 100%
    z-index 99

    // Loading icon is a SVG object.
    object
        left 50%
        margin-left -160px
        margin-top -180px
        position absolute
        top 50%
    div
        font-size 18px
        margin-top 50px


// GENERAL STYLING
// -------------------------------------------------------------------------

.hyperlink
    cursor pointer

.right
    float right

.close
    cursor pointer
    float right

.strong
    font-weight bold

.italic
    font-style italic

.small
    font-size 11px

.watermark
    color rgba(180, 180, 180, 1)

.nocursor
    cursor default !important

.saved
    color lightHoverColor !important
    font-weight bold
    margin-left 6px

.red-bg
    background-color rgba(250, 80, 80, 0.9) !important

// Rows on overlays and admin pags.
.row
    // All delete icons.
    div.delete
        background url(../images/but-delete.png) no-repeat bottom
        cursor pointer
        display inline-block
        height 16px
        margin-bottom 1px
        vertical-align middle
        width 16px

    // When user clicks the delete icon, it gets red.
    div.delete-red
        background-image url(../images/but-delete-red.png)

    // All edit icons.
    div.edit
        background url(../images/but-edit.png) no-repeat bottom
        cursor pointer
        display inline-block
        height 16px
        margin-bottom 1px
        vertical-align middle
        width 16px

// Removed elements with red background.
.admin-tab .removed
.models-list .removed div
    background-color errorBg !important
    color brightTextColor !important
    input
        background-color errorBg !important
        color brightTextColor !important

// STYLED FORMS
// -------------------------------------------------------------------------

.toggle
    padding-bottom 4px

.toggle
    cursor pointer
    display inline-block
    margin 3px
    -webkit-user-select none
    user-select none
    vertical-align middle

button
input[type="submit"]
    background mediumBgColor no-repeat 94%
    border 0
    color lightTextColor
    cursor pointer
    font 14px/25px Arial, Helvetica, sans-serif
    padding 4px 34px 3px 6px

button:hover
input[type="submit"]:hover
    background-color lightBgColor

button:disabled
input[type="submit"]:disabled
    background-color mediumBgColor !important
    color lightBgColor
    cursor default !important
    opacity 0.6 !important

select
    background inputBgColor
    border-radius 0
    border 0
    font 14px/21px Arial, Helvetica, sans-serif
    padding 2px
    -moz-appearance none
    -webkit-appearance none

input[type="email"],
input[type="number"],
input[type="text"],
input[type="password"],
input[type="url"]
    background inputBgColor
    border-radius 0
    border 0
    color inputTextColor
    font 14px/25px Arial, Helvetica, sans-serif
    padding-left 3px
    padding-right 3px
    text-overflow ellipsis
    -moz-appearance none
    -webkit-appearance none

textarea
    background inputBgColor
    border-radius 0
    border 0
    color inputTextColor
    -moz-appearance none
    -webkit-appearance none

input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="url"]:disabled
    background rgb(210, 210, 210)
    color rgb(140, 140, 140)

// Hover on red buttons.
button.red:hover
    background-color rgba(160, 30, 10, 0.3)
    border-color rgb(160, 30, 10)

// Buttons with a save icon.
button.save
    background-image url(../images/but-save.png)

// Buttons with a save icon.
button.delete
    background-image url(../images/but-delete.png)

// Buttons with a edit icon.
button.edit
    background-image url(../images/but-edit.png)

// Buttons with undo icon.
button.undo
    background-image url(../images/but-undo.png)

// Buttons with refresh icon.
button.refresh
    background-image url(../images/but-refresh.png)

// Buttons with refresh icon.
button.identify
    background-image url(../images/but-identify.png)

// When a text field is not valid, set it to red to alert the user
input.error, textarea.error
    background-color rgb(250, 170, 160) !important

// STYLED CHECKBOXES AND RADIO BUTTONS
// -------------------------------------------------------------------------

.toggle input[type="checkbox"] + span:after
    content "off"

.toggle input[type="checkbox"]:checked + span:after
    content "on"

.toggle input[type="checkbox"] + span
.toggle input[type="checkbox"] + span:before
.toggle input[type="checkbox"] + span:after
    display inline-block

.toggle input[type="checkbox"] + span
    font-style normal !important
    vertical-align middle

.toggle input[type="checkbox"] + span:before
.toggle input[type="checkbox"] + span:after
.toggle input[type="checkbox"]:checked + span:before
.toggle input[type="checkbox"]:checked + span:after
    top 0

.toggle input[type="checkbox"] + span:after
.toggle input[type="checkbox"]:checked + span:before
    right 0

.toggle input[type="checkbox"] + span:before
.toggle input[type="checkbox"]:checked + span:after
    left 0

.toggle input[type="checkbox"]
.toggle input[type="checkbox"] + span:before
.toggle input[type="checkbox"] + span:after
    position absolute

.toggle input[type="checkbox"]
    opacity 0

.toggle input[type="checkbox"] + span
    background rgb(210, 210, 210)
    color #8C8C8C
    font 11px/26px Arial, Helvetica, sans-serif
    height 25px
    position relative
    text-indent -9999px
    text-transform uppercase
    width 80px

.toggle input[type="checkbox"] + span:before
    background rgb(245, 245, 245)
    content ""
    height 25px
    width 40%

.toggle input[type="checkbox"] + span:after
    height 27px
    width 62%
    text-align center
    text-indent 0

.toggle input[type="checkbox"]:checked + span
    background checkedBg
    color rgb(250, 250, 250)

.toggle input[type="checkbox"]:disabled + span
    background rgb(235, 235, 235)
    color rgb(145, 145, 145)
    cursor default !important

.toggle input[type="checkbox"]:checked + span:before
    left auto

.toggle input[type="checkbox"]:checked + span:after
    height 30px
    left -1px
    top -1px


// STATUS PAGES
// -------------------------------------------------------------------------

body > #status
    font-size 40px
    margin 50px auto auto auto
    text-align center